import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { 
  WriterWrapper, 
  WriterHeader, 
  WriterContent, 
  WriterItem,
  WriterImg, 
  WriterInfo
} from './style'

class Writer extends PureComponent {
  render () {
    const { writerList } = this.props

    return (
      <WriterWrapper>
        <WriterHeader>
          <div className="title">推荐作者</div>
          <div className="iconfont">&#xe851;换一换</div>
        </WriterHeader>
        <WriterContent>
          {
            writerList.map(item => (
              <WriterItem key={item.get('id')}>
                <WriterImg>
                  <img className="img" src={item.get('imgUrl')} alt="" />
                </WriterImg>
                <WriterInfo>
                  <div className="top">
                    <div className="name">{item.get('name')}</div>
                    <div className="action">加关注</div>
                  </div>
                  <div className="bottom">
                    {item.get('content')}
                  </div>
                </WriterInfo>
              </WriterItem>
            ))
          }
        </WriterContent>
      </WriterWrapper>
    )
  }
}

const mapState = (state) => ({
  writerList: state.getIn(['home', 'writerList'])
})

export default connect(mapState, null)(Writer)
